﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/accordion.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/accordion.js"></script>
	<style>
	body,.accordionMenu{background:#000;}
	</style>
</head>
<body>
<div id="box1"   idField="id" nameField="text" childrenField="children" onnodeclick ="nodeClick" onnodemouseenter="enternode" onnodemouseleave="leavenode"  onmenurender="finishrender" style="width:150px;margin:30px auto;"></div>
<div id="box2"  idField="id" nameField="text" parentField="pid" onnodeclick ="nodeClick" onnodemouseenter="enternode" onnodemouseleave="leavenode"  onmenurender="finishrender" style="width:180px;margin:50px auto;"></div>
<div id="box3"  idField="id" nameField="name" parentField="pid" url="menu.json"  onnodeclick ="nodeClick" onnodemouseenter="enternode" onnodemouseleave="leavenode"  onmenurender="finishrender" style="width:180px;margin:50px auto;"></div>
</body>
</html>
<script>
    var treeArr=[
                {
                  id: "window",
                  text: "Window",
                  children: [
                    {
                      id: "control",
                      text: "Control",
                      children: [
                        {
                          id: "messagebox",
                          text: "MessageBox"
                        },
                        {
                          id: "forms",
                          text: "Forms",
                          children: [
                            {
                              id: "button",
                              text: "Button"
                            }
                          ]
                        },

                      ]
                    }
                  ]
                },
                {
                  id: "lists",
                  text: "Lists",
                  children: [
                    {
                      id: "datagrid",
                      text: "DataGrid"
                    },
                    {
                      id: "tree",
                      text: "Tree",
                      children: [
                        {
                          id: "treegrid",
                          text: "TreeGrid "
                        }
                      ]
                    }
                  ]
                }
              ];
    var listArr = [
                  {
                      "id": "Test",
                      "text": "Test",
                      "pid": ""
                  },{
                      "id": "Demo",
                      "text": "Demo",
                      "pid": "Test"
                  },
				  {
                      "id": "window",
                      "text": "Window",
                      "pid": ""
                  },
                  {
                      "id": "control",
                      "text": "Control",
                      "pid": "window"
                  },
                  {
                      "id": "messagebox",
                      "text": "MessageBox",
                      "pid": "control"
                  },
                  {
                      "id": "forms",
                      "text": "Forms",
                      "pid": "control"
                  },
                  {
                      "id": "button",
                      "text": "Button",
                      "pid": "forms"
                  },
                  {
                      "id": "lists",
                      "text": "Lists",
                      "pid": ""
                  },
                  {
                      "id": "datagrid",
                      "text": "DataGrid",
                      "pid": "lists"
                  },
                  {
                      "id": "tree",
                      "text": "Tree",
                      "pid": "lists"
                  },
                  {
                      "id": "treegrid",
                      "text": "TreeGrid ",
                      "pid": "tree"
                  }
    ];
    //数状结构数据加载
    var menu1=$("#box1").accordion(treeArr);
    //一维结构数据加载
    var menu2=$("#box2").accordion(listArr);
	var menu3=$("#box3").accordion();
    function enternode(sender){
        //console.log(sender.node)
    }
    function nodeClick(sender){
        console.log(sender.node)
    }
    function leavenode(sender){
        //console.log(sender.node)
    }
    function finishrender(sender){
	    console.log(sender);
        console.log("菜单成功加载...")
    }
</script>